<template>
	<div class="container">
		<div><img src="../assets/login.jpg" /></div>
	<!-- 	<div class="spanwords"><span>在线考评系统</span></div>
		 -->
		 <br/> <br/><br/>
		<div class="center">
			<p>账号：</p> 
			<el-input v-model="input" placeholder="请输入身份证号/电话号/账号" class="password"></el-input>
		</div> 
		<div class="center1">
			<p>密码：</p>
			<el-input placeholder="请输入密码" v-model="password" show-password class="password"></el-input>
		</div> 
		<el-button @click="logining()" type="primary" class="loginwords" size="small">登录</el-button> 
		<br/>
		<!-- <a href="forgetpassword" style="text-decoration:none;"><p style="font-size: 10px; margin-top: 15px;">忘记密码</p></a> -->
	<!-- 	<p class="foot">贵州七尧教育科技有限公司版权所有</p> -->
	</div>
</template> 
<script>
	import {login} from "../api/index.js"
	export default { 
		name: 'login',
		data(){
			return{
				password:'',
				input:'',
			}
		},
		methods:{ 
			logining(){
				login({
					idCard: this.input,
					password:this.password
				}).then(res => {
					if(res.data.code===0){
						this.$message({
							type: "success",
							message: "登录成功!",
						});
						window.localStorage.setItem('userInfo', JSON.stringify(res.data.data.menuList))  
						window.localStorage.setItem('userId', JSON.stringify(res.data.data.userId))  
						window.localStorage.setItem('name', JSON.stringify(res.data.data.name))  
						this.$router.push('courcesinfo')
					}else{
						this.$message({
							type: "error",
							message: res.data.msg,
						});
					} 
				}).catch(error => {
					console.log(this.input)
						console.log(this.password)
					   this.$message({
						type: "error",
						message: error,
					});
				}) 
			}
		}
	}
</script>

<style scoped>
	.container{
		position: relative; 
		width:100%;   
		margin: 0;
		padding: 0;
	}
	.container img{ 
		width:100%;   
	}
	.spanwords{
		position: absolute;  
		left: 38.5%;
		top: 22%;
		z-index: 4;
	}
	.spanwords span{ 
	  color: white;
		font-size: 50px;
		font-weight: 600;
		letter-spacing: 10px; 
	} 
	.center{
		position: absolute; 
		width: 50%;  
		left:33%;
		top: 37%; 
	}
	.center1{
		position: absolute; 
		width: 50%;  
		left:33%;
		top: 44%;
	}
	
	.password{
	 position: absolute;
	 width: 200px; 
	 left: 30%;
	 height: 20px;
	 top:10px;
	 border: none;
	 border-radius: 10px;
	}
	.center p{
		position: absolute; 
		top: -12px;
		font-size: 25px;
		left: 19%;
		color: #449EEC;
	}
	.center1 p{
		position: absolute; 
		top: -12px;
		font-size: 25px;
		left: 19%;
			color: #449EEC;
	}
	
	.loginwords{
		position: absolute; 
		top: 52%;
		font-size: 18px;
		letter-spacing: 20px;
		text-align: center;
		width: 85px;
		height: 35px;
		border-radius: 18px;
	}
	.foot{
		position: absolute;
		top: 65%;
		left: 37.5%;
		letter-spacing: 8px;
		color: white;
	}
</style>
